<template>
  <div>
    <el-card class="login-form-layout">
      <el-form
        label-position="left"
      >
        <h3 class="title">账号登录</h3>
        <el-form-item prop="username">
          <el-input
            name="username"
            type="text"
            autocomplete="off"
            placeholder="请输入用户名"
            v-model="username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            name="password"
            autocomplete="off"
            placeholder="请输入密码"
            type="password"
            @keyup.enter="login"
            v-model="password"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="button"
            plain="true"
            type="primary"
            @click="login">登录
          </el-button>
        </el-form-item>
        <el-button type="text" class="register"
                   @click="register">注册账号
        </el-button>
        <el-button type="text" class="findBack">找回密码</el-button>
      </el-form>
    </el-card>
  </div>
</template>
<script lang="js" src="./login.js"></script>
<style scoped>
.QRCode {
  position: absolute;
  left: 0;
  right: 0;
  width: 30px;
  margin: -25px 335px;
}

.button {
  width: 250px;
  height: 0px;
  margin: 20px;
  background: red;
  color: aliceblue;
}

.register {
  position: absolute;
  margin: -30px 100px 0px -170px;
  font-size: 3px;
}

.findBack {
  position: absolute;
  margin: -30px 0px 0px -100px;
  font-size: 3px;
}

.login-form-layout {
  position: absolute;
  left: 0;
  right: 0;
  width: 390px;
  height: 330px;
  margin: 140px auto;
  border-top: 45px solid red;
  z-index: -1;
}
</style>
